Airbnbabel文档b风格学习

Babel 中文网: https://www.babeljs.cn/docs/

Babel 用户手册： https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/user-handbook.md
Babel Plugin Handbook: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#writing-your-first-babel-plugin

2022.8.3 星期六 21:45

# 文档
## 指南
Babel 是什么？
使用指南
配置 Babel
学习 ES2015
升级到 Babel 7
## 配置
Config Files
Config Options
预设（Presets）
插件
Plugins List
Compiler assumptions
## 预设（Presets）
@babel/preset-env
@babel/preset-react
@babel/preset-typescript
@babel/preset-flow
## 杂项
路线图
附加说明
Features Timeline
FAQ
编辑器
## 集成
@babel/cli
@babel/polyfill
@babel/plugin-transform-runtime
@babel/register
@babel/standalone
## 工具
@babel/parser
@babel/core
@babel/generator
@babel/code-frame
@babel/runtime
@babel/template
@babel/traverse
@babel/types
## 辅助
helper-compilation-targets
helper-module-imports

# 用户手册
## 介绍
## 安装 Babel
babel-cli
在项目内运行 Babel CLI
babel-register
babel-node
babel-core
## 配置 Babel
.babelrc
babel-preset-es2015
babel-preset-react
babel-preset-stage-x
## 执行 Babel 生成的代码
babel-polyfill
babel-runtime
## 配置 Babel（进阶）
手动指定插件
插件选项
基于环境自定义 Babel
制作你自己的预设（preset）
## Babel 和其他工具
静态分析工具
语法检查（Linting）
代码风格
文档
框架
React
文本编辑器和 IDEs（集成开发环境）
## Babel 支持
Babel 论坛
Babel 聊天
Babel 问题
创建漂亮的 Babel 错误报告

安装 Babel

babel-register: 这种方法只需要引入文件就可以运行 Babel，或许能更好地融入你的项目设置。
这样做可以把 Babel 注册到 Node 的模块系统中并开始编译其中 require 的所有文件。
现在我们可以使用 register.js 来代替 node index.js 来运行了。

babel-node: 如果你要用 node CLI 来运行代码，那么整合 Babel 最简单的方式就是使用 babel-node CLI，它是 node CLI 的替代品。

babel-core: 如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包。

配置 Babel

babel-preset-es2015
babel-preset-react
babel-preset-stage-x: 这个流程分为 5（0－4）个阶段。

注意 stage-4 预设是不存在的因为它就是上面的 es2015 预设。
以上每种预设都依赖于紧随的后期阶段预设。例如，babel-preset-stage-1 依赖 babel-preset-stage-2，后者又依赖 babel-preset-stage-3。.

执行 Babel 生成的代码

babel-polyfill

abel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。
为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁）的技术。简单地说，polyfill 即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。能让你提前使用还不可用的 APIs，Array.from 就是一个例子。

Babel 用了优秀的 core-js 用作 polyfill，并且还有定制化的 regenerator 来让 generators（生成器）和 async functions（异步函数）正常工作。

然后只需要在文件顶部导入 polyfill 就可以了：
import "babel-polyfill";

babel-runtime

为了实现 ECMAScript 规范的细节，Babel 会使用“助手”方法来保持生成代码的整洁。
由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部，因此你可以把它们统一移动到一个单一的“运行时（runtime）”中去。

通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。

这样就不需要把 _classCallCheck 和 _createClass 这两个助手方法放进每一个需要的文件里去了。

配置 Babel（进阶）

### 基于环境自定义 Babel
当前环境可以使用 process.env.BABEL_ENV 来获得。如果 BABEL_ENV 不可用，将会替换成 NODE_ENV，并且如果后者也没有设置，那么缺省值是”development”。.

制作你自己的预设（preset）

你要做的就是依循命名约定 babel-preset-* 来创建一个新项目然后创建两个文件。
首先，创建一个 package.json，包括针对预设所必要的 dependencies。
然后创建 index.js 文件用于导出 .babelrc 的内容，使用对应的 require 调用来替换 plugins／presets 字符串。
然后只需要发布到 npm 于是你就可以像其它预设一样来使用你的预设了。

/* package.json */
{
  "name": "babel-preset-my-awesome-preset",
  "version": "1.0.0",
  "author": "James Kyle <me@thejameskyle.com>",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-plugin-transform-flow-strip-types": "^6.3.15"
  }
}
/* index.js */
module.exports = {
  presets: [
    require("babel-preset-es2015"),
    require("babel-preset-react")
  ],
  plugins: [
    require("babel-plugin-transform-flow-strip-types")
  ]
};

/* 预设的结果 */
{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    "transform-flow-strip-types"
  ]
}

## Babel 和其他工具
静态分析工具
语法检查（Linting）
ESLint 是最流行的语法检查工具之一，因此我们维护了一个官方的 babel-eslint 整合软件包。

# Babel 插件手册
Babel 插件手册: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md#toc-visitors
## 介绍
## 基础
抽象语法树（ASTs）
Babel 的处理步骤
解析
#### 词法分析
#### 语法分析
转换
生成
遍历
Visitors（访问者）
Paths（路径）
#### Paths in Visitors（存在于访问者中的路径）
State（状态）
Scopes（作用域）
#### Bindings（绑定）
## API
babylon
babel-traverse
babel-types
Definitions（定义）
Builders（构建器）
Validators（验证器）
Converters（变换器）
babel-generator
babel-template
## 编写你的第一个 Babel 插件
## 转换操作
访问
获取子节点的Path
检查节点（Node）类型
检查路径（Path）类型
检查标识符（Identifier）是否被引用
找到特定的父路径
获取同级路径
停止遍历
处理
替换一个节点
用多节点替换单节点
用字符串源码替换节点
插入兄弟节点
插入到容器（container）中
删除节点
替换父节点
删除父节点
Scope（作用域）
检查本地变量是否被绑定
生成UID
提升变量声明至父级作用域
重命名绑定及其引用
## 插件选项
插件的准备和收尾工作
在插件中启用其他语法
构建节点
## 最佳实践
尽量避免遍历抽象语法树（AST）
及时合并访问者对象
可以手动查找就不要遍历
优化嵌套的访问者对象
留意嵌套结构
单元测试